<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-utilities@4.1.3/bootstrap-utilities.css">
</head>

<body>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <el-form-item label="活动名称">
                <el-select v-model="form.age" placeholder="请选择"/>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
                <el-select v-model="form.age" placeholder="请选择"/>
            </el-form-item>
            <el-form-item label="活动">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
                <el-select v-model="form.age" placeholder="请选择"/>
            </el-form-item>
            <el-form-item label="活动名称">
                <div class="d-flex flex-grow-1">
                    <el-select v-model="form.age" placeholder="请选择"></el-select>
                    <el-select v-model="form.age" placeholder="请选择"></el-select>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="d-flex justify-content-end">
                    <el-button>取消</el-button>
                    <el-button type="primary">确定</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</body>
<style>
    /* .d-flex {
        display: flex;
    }
    .flex-grow-1 {
        flex-grow: 1;
    }
    .justify-content-end{
        justify-content: flex-end;
    } */
    .d-flex > .el-select:not(:last-child){
        margin-right:10px;
    }
    .el-form{
        display: flex;
        flex-wrap: wrap;
       
    }
    .el-form-item__label {
        font-weight: bold;
    }
    .el-select{
        width: 100%;
    }
    .el-form--inline .el-form-item{
        display: flex;
        flex: 25%;
        margin-right: 0px;
    }
    .el-input__inner {
        padding: 0 30px;
    }
    .el-form-item__content{
        flex: 1;
    }
</style>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                name: '',
                age: []
            }
        },
        methods: {

        },
    })
</script>

</html>